<template>
	<view class="pageBox">
		<view class="content">
			<view class="contentTop"></view>
			<view class="iptBox">
				<view class="title flex">
					<view class="titleL">
						卡类型
					</view>
				</view>

				<view class="type flex">
					<view class="typeItem flex-row" v-for="item in type" :key="item.id" @click="onTypeItem(item)">
						<image class="choose" src="http://www.bobei.shop/static/login/choose.png"
							v-if="!item.chooseStatus"></image>
						<image class="choose" src="http://www.bobei.shop/static/login/choosed.png"
							v-if="item.chooseStatus"></image>
						<view class="typeItemText">
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>

			<view class="iptBox" v-if="typeId == '2'">
				<view class="title flex">
					<view class="titleL">
						有效期
					</view>
					<view class="titleR">
						（信用卡必填）
					</view>
				</view>
				<view class="ipt flex-between">
					<input type="text" placeholder="年/月(23/01)" v-model="form.validity" />
				</view>
			</view>

			<view class="iptBox" v-if="typeId == '2'">
				<view class="title flex">
					<view class="titleL">
						CVV码
					</view>
					<view class="titleR">
						（信用卡必填）
					</view>
				</view>
				<view class="ipt flex-between">
					<input class="iptObj" type="text" placeholder="请输入信用卡背面后三位数" v-model="form.threeNum" />
				</view>
			</view>

			<view class="iptBox">
				<view class="title flex">
					<view class="titleL">
						所属银行
					</view>
				</view>
				<view class="ipt flex-between">
					<!-- <input class="iptObj" type="text" placeholder="请选择所属银行" :disabled="true" v-model="form.bank" /> -->
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>

			<view class="iptBox">
				<view class="title flex">
					<view class="titleL">
						银行卡号
					</view>
				</view>
				<view class="ipt flex-between">
					<input class="iptObj" type="text" placeholder="请输入银行卡号" v-model="form.bankCard" />
				</view>
			</view>

			<view class="iptBox">
				<view class="title flex">
					<view class="titleL">
						姓名
					</view>
				</view>
				<view class="ipt flex-between">
					<input class="iptObj" type="text" placeholder="请输入姓名" v-model="form.username" />
				</view>
			</view>

			<view class="iptBox">
				<view class="title flex">
					<view class="titleL">
						手机号
					</view>
				</view>
				<view class="ipt flex-between">
					<input class="iptObj" type="text" placeholder="请输入手机号" v-model="form.mobile" />
				</view>
			</view>

			<view class="iptBox">
				<view class="title flex">
					<view class="titleL">
						身份证号
					</view>
				</view>
				<view class="ipt flex-between">
					<input class="iptObj" type="text" placeholder="请输入身份证号" v-model="form.IDCard" />
				</view>
			</view>

			<view class="iptBox">
				<view class="title flex">
					<view class="titleL">
						验证码
					</view>
				</view>
				<view class="ipt flex-between">
					<input class="iptObj" type="text" placeholder="请输入验证码" v-model="form.captcha" />
					<button :plain="true" :class="[typeId == '1' ? 'send sendColor' : 'send sendColor2']"
						:disabled="sendDis" @click="onSendBtn">{{ sendText }}</button>
				</view>
			</view>


		</view>
		<button :plain="true" :class="[disabled ? 'sureBtn dis' : 'sureBtn']" :disabled="disabled"
			@click="onSureBtn">确认绑定</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeId: "1",
				type: [{
						id: "1",
						title: "储蓄卡",
						chooseStatus: true
					},
					{
						id: "2",
						title: "信用卡",
						chooseStatus: false
					},
				],
				form: {
					validity: "", // 有效期
					threeNum: "", // 信用卡背面后三位数
					bank: "", // 所属银行
					bankCard: "", // 银行卡号
					username: "", // 姓名
					mobile: "", // 手机号
					captcha: "", // 验证码
					IDCard: "", // 身份证号
					mch_no_trade: "", // 报备商户号
					mch_order_no: "", // 商户交易订单号
				},
				sendDis: false,
				sendText: "发送验证码",
				show: false,
				// 储蓄卡
				range: ["建设银行", "工商银行", "邮储银行", "光大银行", "广发银行", "民生银行", "浦发银安", "中信银行", "平安银行", "上海银行"],
				// 信用卡
				range2: ["建设银行", "中国银行", "工商银行", "北京银行", "交通银行", "光大银行", "广发银行", "民生银行", "招商银行", "浦发银安", "中信银行", "上海银行"],
				index: 0,
				array: [],
				disabled: false,
			}
		},
		onShow() {
			this.array = this.range;
			this.form.bank = this.range[0];
		},
		methods: {
			onTypeItem(param) {
				this.type.forEach((item) => {
					item.chooseStatus = false;
					if (param.id == item.id) {
						item.chooseStatus = true;
						this.typeId = item.id;
						this.form.bank = "";
					}
				})
				if (this.typeId == '1') {
					this.array = this.range;
					this.index = 0;
					this.form.bank = this.range[0];
				} else {
					this.array = this.range2;
					this.index = 0;
					this.form.bank = this.range2[0];
				}
			},
			onSendBtn() {
				if (this.typeId == "2") {
					if (!this.form.validity) {
						uni.showToast({
							title: "请输入有效期",
							icon: "none",
							duration: 1500
						})
						return
					}
					if (!this.form.threeNum) {
						uni.showToast({
							title: "请输入信用卡背面后三位数",
							icon: "none",
							duration: 1500
						})
						return
					}
				}

				if (!this.form.bank) {
					uni.showToast({
						title: "请输入所属银行",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.bankCard) {
					uni.showToast({
						title: "请输入银行卡号",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.username) {
					uni.showToast({
						title: "请输入姓名",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.mobile) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.IDCard) {
					uni.showToast({
						title: "请输入身份证号",
						icon: "none",
						duration: 1500
					})
					return
				}

				this.sendDis = true;
				this.$post({
					module: 'Finance',
					interface: '1004',
					data: {
						bankType: this.typeId,
						owner: this.form.username,
						idcard: this.form.IDCard,
						cardNo: this.form.bankCard,
						bankSubbranch: this.form.bank,
						mobile: this.form.mobile,
						expire_date: this.form.validity,
						cvv: this.form.threeNum,
					}
				}).then(res => {
					this.form.mch_no_trade = res.data.mch_no_trade;
					this.form.mch_order_no = res.data.mch_order_no;
					uni.showToast({
						title: "发送成功",
						icon: "none",
						duration: 1500
					})
					var time = 60;
					this.sendText = time + 's';
					var timer = setInterval(() => {
						time--;
						this.sendText = time + 's';
						if (time == 0) {
							clearInterval(timer);
							this.sendText = "发送验证码";
							this.sendDis = false;
						}
					}, 1000)
				}).catch(() => {
					this.sendDis = false;
				})
			},
			onSureBtn() {
				if (this.typeId == "2") {
					if (!this.form.validity) {
						uni.showToast({
							title: "请输入有效期",
							icon: "none",
							duration: 1500
						})
						return
					}
					if (!this.form.threeNum) {
						uni.showToast({
							title: "请输入信用卡背面后三位数",
							icon: "none",
							duration: 1500
						})
						return
					}
				}
				
				if (!this.form.bank) {
					uni.showToast({
						title: "请输入所属银行",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.bankCard) {
					uni.showToast({
						title: "请输入银行卡号",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.username) {
					uni.showToast({
						title: "请输入姓名",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.mobile) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (!this.form.IDCard) {
					uni.showToast({
						title: "请输入身份证号",
						icon: "none",
						duration: 1500
					})
					return
				}
				
				if (!this.form.captcha) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none",
						duration: 1500
					})
					return
				}
				
				this.disabled = true;
				this.$post({
					module: 'Finance',
					interface: '1001',
					data: {
						bankType: this.typeId,
						owner: this.form.username,
						idcard: this.form.IDCard,
						cardNo: this.form.bankCard,
						bankSubbranch: this.form.bank,
						mobile: this.form.mobile,
						expire_date: this.form.validity,
						cvv: this.form.threeNum,
						mch_no_trade: this.form.mch_no_trade,
						mch_order_no: this.form.mch_order_no,
						captcha: this.form.captcha,
					}
				}).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: "none",
						duration: 1500
					})
					setTimeout(() => {
						this.goBack();
						this.disabled = false;
					}, 1000)
					
				}).catch(() => {
					this.disabled = false;
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			bindPickerChange(e) {
				this.index = e.detail.value;
				if (this.typeId == '1') {
					this.form.bank = this.range[this.index];
				} else {
					this.form.bank = this.range2[this.index];
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background-color: #FBFBFB;
		padding: 27rpx 30rpx 78rpx;

		.content {
			width: 100%;
			background-color: #ffffff;
			border-radius: 20rpx;
			position: relative;
			padding: 0 30rpx;

			.contentTop {
				width: 100%;
				height: 10rpx;
				background: #F2615F;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				border-radius: 20rpx 20rpx 0 0;
			}

			.iptBox {
				padding: 60rpx 0 23rpx;
				border-bottom: 2rpx solid #F5F5F5;

				.title {
					align-items: flex-end;

					.titleL {
						font-size: 34rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 48rpx;
					}

					.titleR {
						font-size: 26rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #F2615F;
						line-height: 48rpx;
					}
				}

				.type {
					margin-top: 32rpx;

					.typeItem {
						margin-right: 107rpx;

						.choose {
							width: 36rpx;
							height: 36rpx;
						}

						.typeItemText {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 40rpx;
							margin-left: 10rpx;
						}
					}
				}

				.ipt {
					margin-top: 30rpx;

					/deep/.uni-input-placeholder {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #CCCCCC;
						line-height: 40rpx;
					}

					.iptObj {
						width: 70%;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}

					.send {
						margin: 0;
						padding: 0;
						border: none;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						background-color: transparent;
						line-height: 40rpx;
					}

					.sendColor {
						color: #F2615F;
					}

					.sendColor2 {
						color: #E00B12;
					}
				}
			}
		}

		.sureBtn {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 690rpx;
			height: 88rpx;
			background: #F2615F;
			border-radius: 16rpx;
			margin: 36rpx auto 0;
			padding: 0;
			border: none;
			display: block;
		}

		.dis {
			background: #999999;
		}
	}
</style>
